<template>
	<view>
		<!-- <VueOfficeDocx v-if="docShow" :src="'/mobilePath/1.doc'" style="height: calc(100vh - 45px);" @rendered="rendered"></VueOfficeDocx>
    <VueOfficeExcel v-else-if="excelShow" :src="'/mobilePath/%E6%9C%AA%E9%AA%8C%E6%94%B6%E6%9C%AA%E6%8C%82%E8%B4%A6%E5%8D%95%E6%8D%AE-3x0Ebe17339952352391734340561614-2.xlsx'" style="height: calc(100vh - 45px);" @rendered="rendered"></VueOfficeExcel>
    <VueOfficePdf v-else-if="pdfShow" :src="url" style="height: calc(100vh - 45px);" @rendered="rendered"></VueOfficePdf>
		<view v-else-if="imgShow">
			<up-overlay :show="true" zIndex="1">
				<div class="img-box">
					<image src="https://sponsor-static.segmentfault.com/3138fda288d42b4b9c1407866d328cd7.jpeg" mode="widthFix"></image>
				</div>
			</up-overlay>
		</view> -->
		<web-view :src="'https://sponsor-static.segmentfault.com/3138fda288d42b4b9c1407866d328cd7.jpeg'" @load="rendered"></web-view>
	</view>
</template>

<script setup>
	// 引入VueOfficeDocx组件
	import VueOfficeDocx from '@vue-office/docx'
	// 引入VueOfficeExcel组件
	import VueOfficeExcel from '@vue-office/excel'
	// 引入VueOfficePdf组件
	import VueOfficePdf from '@vue-office/pdf'
	// 引入相关样式
	import '@vue-office/excel/lib/index.css'
	// 引入相关样式
	import '@vue-office/docx/lib/index.css'

	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref,
		reactive
	} from "vue"
	let url = ref('')
	let docShow = ref(false);
	let excelShow = ref(false);
	let pdfShow = ref(false);
	let imgShow = ref(true)
	uni.setNavigationBarTitle({
		title: "预览"
	});
	onLoad((option) => {
		let localUrl = uni.getStorageSync('url');
		// console.log('uuu',url);

		// url.value =  'http://10.204.38.18:8012/onlinePreview?url=' + localUrl;

		// console.log('url', url.value);


		let type = matchFileSuffixType(option.t)
		if (type == 'word') {
			docShow.value = true;
		} else if (type == 'pdf') {
			pdfShow.value = true;
		} else if (type == 'excel') {
			excelShow.value = true;
		} else if (type == 'image') {
			imgShow.value = true;
		}


		// uni.showLoading({
		//   title: '加载中'
		// });

		function matchFileSuffixType(fileName) {
			// 后缀获取
			var suffix = ''
			// 获取类型结果
			var result = ''
			try {
				var flieArr = toLowerCase(fileName).split('.')
				suffix = flieArr[flieArr.length - 1]
			} catch (err) {
				suffix = ''
			}
			// fileName无后缀返回 false
			if (!suffix) {
				result = false
				return result
			}
			// 图片格式
			var imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif','webp']
			// 进行图片匹配
			result = imglist.some(function (item) {
			    return item == suffix
			})
			if (result) {
			    result = 'image'
			    return result
			}
			// // 匹配txt
			// var txtlist = ['txt']
			// result = txtlist.some(function (item) {
			//     return item == suffix
			// })
			// if (result) {
			//     result = 'txt'
			//     return result
			// }
			// 匹配 excel
			var excelist = ['xls', 'xlsx']
			result = excelist.some(function(item) {
				return item == suffix
			})
			if (result) {
				result = 'excel'
				return result
			}
			// 匹配 word
			var wordlist = ['doc', 'docx']
			result = wordlist.some(function(item) {
				return item == suffix
			})
			if (result) {
				result = 'word'
				return result
			}
			// 匹配 pdf
			var pdflist = ['pdf']
			result = pdflist.some(function(item) {
				return item == suffix
			})
			if (result) {
				result = 'pdf'
				return result
			}
			// // 匹配 ppt
			// var pptlist = ['ppt']
			// result = pptlist.some(function (item) {
			//     return item == suffix
			// })
			// if (result) {
			//     result = 'ppt'
			//     return result
			// }
			// // 匹配 视频
			// var videolist = ['mp4', 'm2v', 'mkv']
			// result = videolist.some(function (item) {
			//     return item == suffix
			// })
			// if (result) {
			//     result = 'video'
			//     return result
			// }
			// // 匹配 音频
			// var radiolist = ['mp3', 'wav', 'wmv']
			// result = radiolist.some(function (item) {
			//     return item == suffix
			// })
			// if (result) {
			//     result = 'radio'
			//     return result
			// }
			// 其他 文件类型
			result = 'other'
			return result
		}

		// setTimeout(() => {
		//   uni.hideLoading()
		// }, 10000);
	})
	let rendered = () => {
		// uni.hideLoading()
	}
</script>

<style lang="scss">
	
	.img-box {
		height: 100%;
		box-sizing: border-box;
		padding-top: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>